<template>
  <div>
    <el-form
      :model="punishForm"
      ref="punishForm"
      :rules="punishRules"
      label-width="130px"
      :inline="false"
    >
      <el-form-item label="处置时间">
        <el-input v-model="punishForm.solve_date" disabled></el-input>
      </el-form-item>
      <el-form-item label="处置单位">
        <el-input v-model="punishForm.solve_dept_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="承办人" prop="undertake__user_name">
        <el-input
          v-model="punishForm.undertake__user_name"
          placeholder=""
        ></el-input>
      </el-form-item>
      <el-form-item label="是否属实" prop="true_type">
        <el-select v-model="punishForm.true_type">
          <el-option :key="1" label="属实" value="属实"></el-option>
          <el-option :key="2" label="部分属实" value="部分属实"></el-option>
          <el-option :key="3" label="失实" value="失实"></el-option>
          <el-option :key="4" label="无法查实" value="无法查实"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否转问题线索" prop="problem_clues">
        <el-select v-model="punishForm.problem_clues">
          <el-option :key="0" label="否" value="0"></el-option>
          <el-option :key="1" label="是" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="处置结果" prop="solve_result">
        <el-input
          type="textarea"
          v-model="punishForm.solve_result"
          placeholder=""
          :autosize="{
            minRows: 3,
            maxRows: 6,
          }"
        ></el-input>
      </el-form-item>
      <el-form-item label="处置结果附件">
        <CommonUpload
          tableName="red-alert-punish"
          :useType="'czjg'"
          :pid="detail.assign_id"
        ></CommonUpload>
      </el-form-item>
      <el-form-item label="四种形态处理结果">
        <el-button
          style="margin-bottom: 10px"
          icon="el-icon-plus"
          type="primary"
          @click="addNewPunishItem"
          >添加处置</el-button
        >
        <el-table :data="punishForm.fourForms" border stripe>
          <el-table-column
            label="姓名"
            prop="user_name"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="工作单位"
            prop="dept_name"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="职务"
            prop="duty_level"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="岗位"
            prop="post"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="组织措施"
            prop="solve_mode"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="党纪处分"
            prop="party_punish"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="政务处分"
            prop="gov_punish"
            min-width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            prop=""
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="editPunishItem(scope)"
                >编辑</el-button
              >
              <el-button
                icon="el-icon-minus"
                type="danger"
                size="mini"
                @click="removePunishItem(scope)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="建章立制" prop="create_system">
        <el-input
          type="textarea"
          v-model="punishForm.create_system"
          placeholder=""
          :autosize="{
            minRows: 3,
            maxRows: 6,
          }"
        ></el-input>
      </el-form-item>
      <el-form-item label="建章立制附件">
        <CommonUpload
          tableName="red-alert-punish"
          :useType="'jzlz'"
          :pid="detail.assign_id"
        ></CommonUpload>
      </el-form-item>
      <el-form-item label="挽回经济损失" prop="save_money">
        <el-input-number
          v-model="punishForm.save_money"
          size="normal"
          label=""
          :min="0"
          :step="1"
          :controls="true"
          :precision="2"
          controls-position="right"
        >
        </el-input-number>
        （ 万元 ）
      </el-form-item>
      <el-form-item label="">
        <el-button type="info" @click="savePunishForm(0)">暂存</el-button>
        <el-button type="primary" @click="savePunishForm(1)">提交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="四种形态处理结果"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialog.punishItemForm"
      @close="dialog.punishItemForm = false"
    >
      <el-form
        :model="punishItemForm"
        ref="punishItemForm"
        :rules="punishItemRules"
        label-width="150px"
        :inline="false"
      >
        <el-form-item label="姓名" prop="user_name">
          <el-input v-model="punishItemForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="工作单位" prop="dept_name">
          <el-input v-model="punishItemForm.dept_name"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="duty_level">
          <el-input v-model="punishItemForm.duty_level"></el-input>
        </el-form-item>
        <el-form-item label="岗位" prop="post">
          <el-input v-model="punishItemForm.post"></el-input>
        </el-form-item>
        <el-form-item label="组织措施" prop="solve_mode">
          <div class="check-wrapper">
            <div>
              <label>第一种形态组织措施</label>
              <div>
                <el-checkbox
                  v-for="(item, index) in options.mode1"
                  v-model="item.checked"
                  :key="'m1_' + index"
                  :label="item.label"
                  :checked="item.checked"
                  @change="checkMode"
                ></el-checkbox>
              </div>
            </div>
            <div>
              <label>第二种形态组织措施</label>
              <div>
                <el-checkbox
                  v-for="(item, index) in options.mode2"
                  v-model="item.checked"
                  :key="'m2_' + index"
                  :label="item.label"
                  :checked="item.checked"
                  @change="checkMode"
                ></el-checkbox>
              </div>
            </div>
            <div>
              <label>第三种形态组织措施</label>
              <div>
                <el-checkbox
                  v-for="(item, index) in options.mode3"
                  v-model="item.checked"
                  :key="'m3_' + index"
                  :label="item.label"
                  @change="checkMode"
                ></el-checkbox>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="党纪处分" prop="party_punish">
          <el-select v-model="punishItemForm.party_punish">
            <el-option
              v-for="(item, index) in options.party_punish"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="政务处分" prop="gov_punish">
          <el-select v-model="punishItemForm.gov_punish">
            <el-option
              v-for="(item, index) in options.gov_punish"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="punishItemAdd">保存</el-button>
          <el-button @click="dialog.punishItemForm = false">返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import CommonUpload from "@/components/Common/CommonUpload.vue";
import { required } from "@/utils/eValidate";
import { getSelectOptions } from "@/api/Index";
import { postRedAlertPunish } from "@/api/RedAlert/Index";
import { getCurrentDate, getCurrentDateTime } from "@/utils/date";
import uploadMixin from "@/components/GenerateForm/uploadMixin";
export default {
  mixins: [uploadMixin],
  components: { CommonUpload },
  props: {
    detail: {
      type: Object,
      default: null,
    },
    alertType: {
      type: String,
      default: "red",
    },
    fromType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      punishForm: {
        id: "",
        assign_id: "", // 预警交办单ID
        save_money: "", // 挽回经济损失
        create_system: "", // 建章立制
        fourForms: [], // 处理结果
        problem_clues: "", // 是否转问题线索 0 否 1 是
        solve_date: "", // 处置时间
        solve_dept_id: "", // 处置单位ID
        solve_dept_name: "", // 处置单位名称
        solve_result: "", // 处置结果
        true_type: "", // 是否属实 属实 部分属实 失实 无法查实
        undertake__user_name: "", // 承办人
        warning_id: "", // 预警 ID
      },
      punishRules: {
        solve_result: [required],
        // create_system: [required],
        undertake__user_name: [required],
        true_type: [required],
        problem_clues: [required],
      },
      punishItemForm: {
        id: "",
        user_name: "",
        dept_name: "",
        duty_level: "",
        post: "",
        solve_mode: "",
        party_punish: "",
        gov_punish: "",
      },
      punishItemRules: {
        user_name: [required],
        dept_name: [required],
        duty_level: [required],
        post: [required],
      },
      dialog: {
        punishItemForm: false,
      },
      options: {
        party_punish: [],
        gov_punish: [],
        mode1: [],
        mode2: [],
        mode3: [],
      },
    };
  },
  methods: {
    punishItemAdd() {
      this.$refs.punishItemForm.validate((valid) => {
        if (valid) {
          if (this.punishItemForm.id) {
            this.punishForm.fourForms = this.punishForm.fourForms.map((i) => {
              if (i.id == this.punishItemForm.id) {
                i = JSON.parse(JSON.stringify(this.punishItemForm));
              }
              return i;
            });
          } else {
            this.punishForm.fourForms.push(
              JSON.parse(
                JSON.stringify(
                  Object.assign(this.punishItemForm, {
                    id: new Date(),
                  })
                )
              )
            );
          }

          this.dialog.punishItemForm = false;
        }
      });
    },
    savePunishForm(status) {
      if (status == 0) {
        this.punishForm.solve_date = getCurrentDateTime();
        if (this.alertType == "red") {
          this.punishForm.assign_id = this.detail.assign_id;
        }
        this.punishForm.type = this.type;
        this.punishForm.warning_id = this.detail.id;
        this.punishForm.status = status;

        delete this.punishForm.fourFormsList;
        postRedAlertPunish(this.punishForm).then((res) => {
          if (res.code == 0) {
            this.$message.success("暂存成功");
            this.$emit("refresh");
          }
        });
      } else {
        this.$refs.punishForm.validate((valid) => {
          if (valid) {
            this.punishForm.solve_date = getCurrentDateTime();
            if (this.alertType == "red") {
              this.punishForm.assign_id = this.detail.assign_id;
            }
            this.punishForm.type = this.type;
            this.punishForm.warning_id = this.detail.id;
            this.punishForm.status = status;

            delete this.punishForm.fourFormsList;
            postRedAlertPunish(this.punishForm).then((res) => {
              if (res.code == 0) {
                this.$message.success("提交成功");
                this.$emit("refresh");
              }
            });
          }
        });
      }
    },
    async initOptions(target) {
      return await getSelectOptions({
        parameter: target,
      }).then((res) => {
        if (res.code == 0) {
          return res.data;
        }
      });
    },
    checkMode() {
      let all = this.options.mode1.concat(
        this.options.mode2.concat(this.options.mode3)
      );

      let checked = all
        .filter((i) => {
          if (i.checked) {
            return i;
          }
        })
        .map((i) => {
          return i.value;
        })
        .join(",");

      this.punishItemForm.solve_mode = checked;
      this.$set(this.punishItemForm, "solve_mode", checked);
    },
    addNewPunishItem() {
      this.dialog.punishItemForm = true;
      this.$nextTick(() => {
        this.$refs.punishItemForm.resetFields();
      });
      this.resetOptions();
      this.punishItemForm.id = "";
    },
    editPunishItem(item) {
      this.punishItemForm = JSON.parse(JSON.stringify(item.row));
      this.dialog.punishItemForm = true;
      this.initChecked();
    },
    removePunishItem(item) {
      this.punishForm.fourForms = this.punishForm.fourForms.filter((i) => {
        return i.id != item.row.id;
      });
    },
    initChecked() {
      if (this.punishItemForm.solve_mode.trim() != "") {
        let checked = this.punishItemForm.solve_mode.split(",");
        checked.forEach((c, index) => {
          this.options.mode1 = this.options.mode1.map((i) => {
            if (c == i.value) {
              i.checked = true;
            }
            return i;
          });
          this.options.mode2 = this.options.mode2.map((i) => {
            if (c == i.value) {
              i.checked = true;
            }
            return i;
          });
          this.options.mode3 = this.options.mode3.map((i) => {
            if (c == i.value) {
              i.checked = true;
            }
            return i;
          });
          checked.slice(index, 1);
        });
      }
    },
    resetOptions() {
      this.options.mode1 = this.options.mode1.map((i) => {
        i.checked = false;
        return i;
      });
      this.options.mode2 = this.options.mode2.map((i) => {
        i.checked = false;
        return i;
      });
      this.options.mode3 = this.options.mode3.map((i) => {
        i.checked = false;
        return i;
      });
    },
    initDefaultData() {
      // 红色预警处置
      if (this.fromType == 0 && this.detail.assignSolveDetail) {
        this.punishForm = JSON.parse(
          JSON.stringify(this.detail.assignSolveDetail)
        );

        this.$set(
          this.punishForm,
          "fourForms",
          JSON.parse(JSON.stringify(this.punishForm.fourFormsList))
        );
      }
      // 黄色预警 纪委处置
      if (this.fromType == 1 && this.detail.JJSolveDetail) {
        this.punishForm = JSON.parse(JSON.stringify(this.detail.JJSolveDetail));

        this.$set(
          this.punishForm,
          "fourForms",
          JSON.parse(JSON.stringify(this.punishForm.fourFormsList))
        );
      }
      // 黄色预警 主管单位处置
      if (this.fromType == 2 && this.detail.ZGSolveDetail) {
        this.punishForm = JSON.parse(JSON.stringify(this.detail.ZGSolveDetail));

        this.$set(
          this.punishForm,
          "fourForms",
          JSON.parse(JSON.stringify(this.punishForm.fourFormsList))
        );
      }
    },
  },
  created() {
    let user = JSON.parse(localStorage.getItem("user"));
    this.punishForm.solve_dept_id = user.dept_id;
    this.punishForm.solve_dept_name = user.dept_name;
    this.punishForm.solve_date = getCurrentDate();

    this.initDefaultData();

    this.initOptions("党纪处分").then((res) => {
      this.options.party_punish = res;
    });
    this.initOptions("政务处分").then((res) => {
      this.options.gov_punish = res;
    });
    this.initOptions("第一种形态组织措施").then((res) => {
      this.options.mode1 = res.map((i) => {
        i.checked = false;
        return i;
      });
    });
    this.initOptions("第二种形态组织措施").then((res) => {
      this.options.mode2 = res.map((i) => {
        i.checked = false;
        return i;
      });
    });
    this.initOptions("第三种形态组织措施").then((res) => {
      this.options.mode3 = res.map((i) => {
        i.checked = false;
        return i;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.check-wrapper {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-around;
  > div {
    width: 32%;
    > label {
      width: 100%;
      display: inline-block;
      text-align: center;
      font-weight: 600;
    }
    > div {
      text-align: left;
      height: calc(100% - 36px);
      overflow-y: auto;
    }
    &:nth-child(1) {
      border-right: 1px solid #ccc;
    }
    &:nth-child(2) {
      border-right: 1px solid #ccc;
    }
  }
}
</style>